<template>
    <div id="VerticalBar" ref="VerticalBar"></div>
</template>

<script>
// https://www.makeapie.com/editor.html?c=xJjnxsQM4h
import echarts from 'echarts'
import { cleaningMaintenance } from '@/api/api'
export default {
    props: {
        isReady: {
            type: Boolean
        }
    },
    watch: {
        isReady (newval, oldval) {
            if (newval) {
                this.$nextTick(() => {   //此处使用这个可以等节点渲染后再获取节点
                    // this.getChart()
                    this.cleaningMaintenance()
                })
            }
        }
    },
    data () {
        return {
            echartElement: null,
            config: {
                normal: 20,
                overdue: 8

            }
        }
    },
    methods: {
        cleaningMaintenance () {
            cleaningMaintenance()
                .then(res => {
                    if (res.status == 200 && res.data.code == 2000) {
                        this.config.normal = res.data.data.normal == 0 ? 0.001 : res.data.data.normal
                        this.config.overdue = res.data.data.overdue == 0 ? 0.001 : res.data.data.overdue
                        this.getChart()
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        },
        getChart () {
            if (this.echartElement) {
                this.echartElement.dispose();
                this.echartElement = null
            }
            this.echartElement = echarts.init(this.$el);
            let option = {
                title: {
                    // text: '截止统计日期: 2021-01-01',
                    text: `截止统计日期: ${this.$dateFormat('YYYY-mm-dd', (new Date().getTime() - (1000 * 60 * 60 * 24)))}`,
                    top: '15%',
                    // textAlign: "center",
                    left: "5%",
                    textStyle: {
                        color: '#ccc',
                        fontSize: '15',
                        // fontWeight: '400'
                    }
                },
                "legend": {
                    "show": false,
                    "icon": "none",
                    "orient": 'vertical',
                    "data": [
                        {
                            "name": "清洗正常"
                        },
                        {
                            "name": "清洗超期"
                        }
                    ],
                    "top": "15%",
                    "right": '5%',
                    "textStyle": {
                        "color": "#fff"
                    },
                },
                "grid": {
                    "top": '45%',
                    "bottom": '20%'
                },
                "tooltip": {},
                "xAxis": {
                    "data": ["清洗正常", "清洗超期"],
                    "axisTick": {
                        "show": false
                    },
                    "axisLine": {
                        "show": false
                    },
                    "axisLabel": {
                        interval: 0,
                        textStyle: {
                            color: '#beceff',
                            fontSize: 20,
                        },
                        margin: 80, //刻度标签与轴线之间的距离。
                    }
                },
                "yAxis": { // Y轴所有信息不可见
                    "splitLine": {
                        "show": false
                    },
                    "axisTick": {
                        "show": false
                    },
                    "axisLine": {
                        "show": false
                    },
                    "axisLabel": {
                        "show": false
                    }
                },
                "series": [
                    { // 顶部圆形
                        "name": "清洗超期",
                        "type": "pictorialBar",
                        "symbolSize": ['80', '30'],
                        "symbolOffset": [0, -15],
                        "z": 13,
                        "data": [
                            {
                                "name": "清洗正常",
                                "value": this.config.normal,
                                "symbolPosition": "end",
                                "itemStyle": {
                                    "normal": {
                                        "color": "#00fff5"  //圆柱顶部颜色
                                    }
                                }
                            },
                            {
                                "name": "清洗超期",
                                "value": this.config.overdue,
                                "symbolPosition": "end",
                                "itemStyle": {
                                    "normal": {
                                        "color": "#ffcc00" //圆柱顶部颜色
                                    }
                                }
                            }
                        ]
                    },
                    { // 底部圆形
                        "name": "",
                        "type": "pictorialBar",
                        "symbolSize": ['80', '30'],
                        "symbolOffset": [0, 15],
                        "z": 11,
                        "data": [
                            {
                                "name": "清洗正常",
                                "value": this.config.normal,
                                "itemStyle": {
                                    "normal": {
                                        "color": "#43bafe" //圆柱底部颜色
                                    }
                                }
                            },
                            {
                                "name": "清洗超期",
                                "value": this.config.overdue,
                                "itemStyle": {
                                    "normal": {
                                        "color": "#ff7800" //圆柱底部颜色
                                    }
                                }
                            }
                        ]
                    },
                    { // 底层实体圈
                        "name": "",
                        "type": "pictorialBar",
                        "symbolSize": [120, 50],
                        "symbolOffset": [0, 25],
                        "z": 11,
                        "data": [
                            {
                                "name": "清洗正常",
                                "value": this.config.normal,
                                "itemStyle": {
                                    "normal": {
                                        "color": "transparent",
                                        "borderColor": "#43bafe", //底部内圆圈颜色
                                        "borderWidth": 5
                                    }
                                }
                            },
                            {
                                "name": "清洗超期",
                                "value": this.config.overdue,
                                "itemStyle": {
                                    "normal": {
                                        "color": "transparent",
                                        "borderColor": "#ff7800", //底部内圆圈颜色
                                        "borderWidth": 5
                                    }
                                }
                            }
                        ]
                    },
                    { // 底层条形圈
                        "name": "",
                        "type": "pictorialBar",
                        "symbolSize": [160, 65],
                        "symbolOffset": [0, 35],
                        "z": 10,
                        "data": [
                            {
                                "name": "清洗正常",
                                "value": this.config.normal,
                                "itemStyle": {
                                    "normal": {
                                        "color": "transparent",
                                        "borderColor": "#43bafe",  //底部外圆圈颜色
                                        "borderType": "dashed",
                                        "borderWidth": 5
                                    }
                                }
                            },
                            {
                                "name": "清洗超期",
                                "value": this.config.overdue,
                                "itemStyle": {
                                    "normal": {
                                        "color": "transparent",
                                        "borderColor": "#ff7800", //底部外圆圈颜色
                                        "borderType": "dashed",
                                        "borderWidth": 5
                                    }
                                }
                            }
                        ]
                    },
                    { // 圆柱体
                        "name": "清洗正常",
                        "type": "bar",
                        "silent": true,
                        "barWidth": '80',
                        "barGap": "-100%",
                        "z": 12,
                        "label": {
                            formatter: function (param) {
                                let res = parseInt(param.value)
                                return res + '台'
                            }
                        },
                        "data": [
                            {
                                "name": "清洗正常",
                                "value": this.config.normal,
                                "label": {
                                    "normal": {
                                        "show": true,
                                        "position": "top",
                                        "distance": '20',
                                        "textStyle": {
                                            "color": "#00fff5", //柱子对应数值颜色
                                            "fontSize": 20
                                        }
                                    },
                                },
                                "itemStyle": {
                                    "normal": {
                                        "color": {
                                            "x": 0,
                                            "y": 0,
                                            "x2": 0,
                                            "y2": 1,
                                            "type": "linear",
                                            "global": false,
                                            "colorStops": [{
                                                "offset": 0,
                                                "color": "rgba(0,255,245,0.5)"
                                            }, {
                                                "offset": 1,
                                                "color": "#43bafe" //底部渐变颜色
                                            }]
                                        }
                                    }
                                }
                            },
                            {
                                "name": "清洗超期",
                                "value": this.config.overdue,
                                "label": {
                                    "normal": {
                                        "show": true,
                                        "position": "top",
                                        "distance": '25',
                                        "textStyle": {
                                            "color": "#ffcc00", //柱子对应数值颜色
                                            "fontSize": 20
                                        }
                                    }
                                },
                                "itemStyle": {
                                    "normal": {
                                        "color": {
                                            "x": 0,
                                            "y": 0,
                                            "x2": 0,
                                            "y2": 1,
                                            "type": "linear",
                                            "global": false,
                                            "colorStops": [{
                                                "offset": 0,
                                                "color": "rgba(255,204,0,0.5)"
                                            }, {
                                                "offset": 1,
                                                "color": "#ff7800" //底部渐变颜色
                                            }]
                                        }
                                    }
                                }
                            }
                        ]
                    }
                ]
            }
            this.echartElement.setOption(option);
        }
    },
    mounted () {
        // setTimeout(() => {
        //     this.getChart()
        // }, 3000);
    },
    beforeDestroy () {
        this.echartElement.dispose();
    }
}
</script>

<style lang="less" scoped>
#VerticalBar {
    width: 100%;
    height: 100%;
    position: relative;
}
#VerticalBar::before {
    content: "● 清洗正常";
    color: #73fbf4;
    position: absolute;
    top: 15%;
    right: 3%;
    font-size: 0.15rem;
}
#VerticalBar::after {
    content: "● 清洗超期";
    color: #f8cc46;
    position: absolute;
    top: 25%;
    right: 3%;
    font-size: 0.15rem;
}
</style>